<template>
  <div class="supplier-detail">
    <div class="page-header">
      <div class="header-left">
        <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
        <h2>供应商详情</h2>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleEdit">
          <el-icon><Edit /></el-icon>
          编辑供应商
        </el-button>
        <el-button type="success" @click="handleProducts">
          <el-icon><Box /></el-icon>
          查看商品
        </el-button>
      </div>
    </div>

    <div class="detail-content" v-loading="loading">
      <!-- 基本信息卡片 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>供应商名称：</label>
              <span>{{ supplierInfo.name }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>供应商编码：</label>
              <span>{{ supplierInfo.code }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>企业类型：</label>
              <span>{{ supplierInfo.type }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>联系人：</label>
              <span>{{ supplierInfo.contactPerson }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>联系电话：</label>
              <span>{{ supplierInfo.phone }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>邮箱地址：</label>
              <span>{{ supplierInfo.email }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>合作状态：</label>
              <el-tag :type="supplierInfo.status === 1 ? 'success' : 'danger'">
                {{ supplierInfo.status === 1 ? '合作中' : '已终止' }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>合作等级：</label>
              <el-rate v-model="supplierInfo.rating" disabled show-score />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>合作时间：</label>
              <span>{{ supplierInfo.cooperationDate }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="info-item">
              <label>公司地址：</label>
              <span>{{ supplierInfo.address }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="info-item">
              <label>公司简介：</label>
              <span>{{ supplierInfo.description }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 资质信息卡片 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>资质信息</span>
          </div>
        </template>
        
        <el-table :data="qualifications" style="width: 100%" border>
          <el-table-column prop="name" label="资质名称" min-width="150" />
          <el-table-column prop="number" label="证书编号" width="200" />
          <el-table-column prop="issueDate" label="发证日期" width="120" />
          <el-table-column prop="expiryDate" label="有效期至" width="120" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getQualificationStatusType(row.status)">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewQualification(row)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 合作商品卡片 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>合作商品</span>
            <span class="product-count">共 {{ supplierProducts.length }} 个商品</span>
          </div>
        </template>
        
        <el-table :data="supplierProducts" style="width: 100%" border>
          <el-table-column prop="code" label="商品编码" width="120" />
          <el-table-column prop="name" label="商品名称" min-width="150" />
          <el-table-column prop="category" label="分类" width="100" />
          <el-table-column prop="specification" label="规格" width="120" />
          <el-table-column prop="price" label="价格" width="100">
            <template #default="{ row }">
              ¥{{ row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="库存" width="80" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                {{ row.status === 1 ? '上架' : '下架' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewProduct(row)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 合作历史卡片 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>合作历史</span>
          </div>
        </template>
        
        <el-timeline>
          <el-timeline-item
            v-for="(history, index) in cooperationHistory"
            :key="index"
            :timestamp="history.time"
            :type="history.type"
          >
            <div class="history-content">
              <h4>{{ history.title }}</h4>
              <p>{{ history.description }}</p>
              <div class="history-details" v-if="history.details">
                <el-tag v-for="detail in history.details" :key="detail.key" size="small">
                  {{ detail.key }}: {{ detail.value }}
                </el-tag>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <!-- 评价记录卡片 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>评价记录</span>
          </div>
        </template>
        
        <el-table :data="evaluations" style="width: 100%" border>
          <el-table-column prop="date" label="评价日期" width="120" />
          <el-table-column prop="evaluator" label="评价人" width="100" />
          <el-table-column prop="category" label="评价类别" width="120" />
          <el-table-column prop="score" label="评分" width="100">
            <template #default="{ row }">
              <el-rate v-model="row.score" disabled />
            </template>
          </el-table-column>
          <el-table-column prop="content" label="评价内容" show-overflow-tooltip />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === '已处理' ? 'success' : 'warning'">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Edit, Box, ArrowLeft } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'SupplierDetail',
  components: {
    Edit,
    Box,
    ArrowLeft
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const loading = ref(false)
    
    // 供应商基本信息
    const supplierInfo = reactive({
      id: '',
      name: '绿色农场供应商',
      code: 'SUP001',
      type: '生产企业',
      contactPerson: '张经理',
      phone: '13800138000',
      email: 'zhang@greenfarm.com',
      status: 1,
      rating: 4.5,
      cooperationDate: '2023-01-15',
      address: '北京市朝阳区绿色农业园区A区1号',
      description: '专业从事有机农产品种植和销售，拥有完善的种植基地和配送体系，致力于为消费者提供安全、健康的农产品。'
    })
    
    // 资质信息
    const qualifications = ref([
      {
        name: '食品生产许可证',
        number: 'SC101234567890',
        issueDate: '2023-01-01',
        expiryDate: '2028-01-01',
        status: '有效'
      },
      {
        name: '有机产品认证证书',
        number: 'ORG2023001',
        issueDate: '2023-03-15',
        expiryDate: '2026-03-15',
        status: '有效'
      },
      {
        name: 'ISO9001质量管理体系认证',
        number: 'ISO9001-2023-001',
        issueDate: '2023-06-01',
        expiryDate: '2026-06-01',
        status: '有效'
      },
      {
        name: 'HACCP食品安全管理体系认证',
        number: 'HACCP-2023-001',
        issueDate: '2023-08-01',
        expiryDate: '2026-08-01',
        status: '有效'
      }
    ])
    
    // 合作商品
    const supplierProducts = ref([
      {
        code: 'P001',
        name: '有机苹果',
        category: '生鲜果蔬',
        specification: '500g/袋',
        price: 15.80,
        stock: 850,
        status: 1
      },
      {
        code: 'P002',
        name: '有机胡萝卜',
        category: '生鲜果蔬',
        specification: '1kg/袋',
        price: 8.50,
        stock: 1200,
        status: 1
      },
      {
        code: 'P003',
        name: '有机白菜',
        category: '生鲜果蔬',
        specification: '2kg/颗',
        price: 12.00,
        stock: 600,
        status: 1
      },
      {
        code: 'P004',
        name: '有机土豆',
        category: '生鲜果蔬',
        specification: '2.5kg/袋',
        price: 18.00,
        stock: 400,
        status: 0
      }
    ])
    
    // 合作历史
    const cooperationHistory = ref([
      {
        time: '2024-01-15 14:30:00',
        title: '续签合作协议',
        description: '成功续签2024年度合作协议',
        type: 'success',
        details: [
          { key: '合同金额', value: '500万元' },
          { key: '合作期限', value: '2024.01.01-2024.12.31' }
        ]
      },
      {
        time: '2023-12-20 10:15:00',
        title: '年度评价',
        description: '完成2023年度供应商评价，评级为A级',
        type: 'success',
        details: [
          { key: '评价等级', value: 'A级' },
          { key: '综合得分', value: '92分' }
        ]
      },
      {
        time: '2023-11-15 16:45:00',
        title: '质量改进',
        description: '针对质量反馈进行改进，通过复检',
        type: 'primary',
        details: [
          { key: '改进项目', value: '包装标准化' },
          { key: '复检结果', value: '合格' }
        ]
      },
      {
        time: '2023-10-01 09:00:00',
        title: '扩大合作',
        description: '新增3个商品品类合作',
        type: 'info',
        details: [
          { key: '新增品类', value: '根茎类蔬菜' },
          { key: '商品数量', value: '3个' }
        ]
      },
      {
        time: '2023-01-15 14:00:00',
        title: '建立合作关系',
        description: '正式建立合作关系，签订首份合作协议',
        type: 'primary',
        details: [
          { key: '合同金额', value: '300万元' },
          { key: '合作期限', value: '2023.01.15-2023.12.31' }
        ]
      }
    ])
    
    // 评价记录
    const evaluations = ref([
      {
        date: '2024-01-10',
        evaluator: '李采购',
        category: '商品质量',
        score: 5,
        content: '商品质量稳定，包装规范，配送及时',
        status: '已处理'
      },
      {
        date: '2024-01-05',
        evaluator: '王质检',
        category: '质量检测',
        score: 4,
        content: '检测结果良好，个别批次需要改进',
        status: '已处理'
      },
      {
        date: '2023-12-28',
        evaluator: '张经理',
        category: '服务态度',
        score: 5,
        content: '服务态度很好，响应速度快',
        status: '已处理'
      },
      {
        date: '2023-12-20',
        evaluator: '刘主管',
        category: '价格竞争力',
        score: 4,
        content: '价格合理，有一定竞争力',
        status: '已处理'
      }
    ])
    
    // 加载供应商详情
    const loadSupplierDetail = async () => {
      loading.value = true
      try {
        // 模拟API请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 从路由参数获取供应商ID
        const supplierId = route.params.id
        if (supplierId) {
          supplierInfo.id = supplierId
          // 这里应该调用API获取供应商详情
        }
      } catch (error) {
        console.error('加载供应商详情失败:', error)
        ElMessage.error('加载供应商详情失败')
      } finally {
                  loading.value = true
      }
    }
    
    // 返回上一页
    const goBack = () => {
      router.go(-1)
    }
    
    // 编辑供应商
    const handleEdit = () => {
      router.push(`/suppliers/edit/${supplierInfo.id}`)
    }
    
    // 查看商品
    const handleProducts = () => {
      router.push(`/suppliers/${supplierInfo.id}/products`)
    }
    
    // 查看资质
    const viewQualification = (qualification) => {
      ElMessage.info(`查看资质: ${qualification.name}`)
      // 这里可以打开资质详情对话框
    }
    
    // 查看商品
    const viewProduct = (product) => {
      router.push(`/products/detail/${product.code}`)
    }
    
    // 获取资质状态类型
    const getQualificationStatusType = (status) => {
      const statusMap = {
        '有效': 'success',
        '即将过期': 'warning',
        '已过期': 'danger'
      }
      return statusMap[status] || 'info'
    }
    
    onMounted(() => {
      loadSupplierDetail()
    })
    
    return {
      loading,
      supplierInfo,
      qualifications,
      supplierProducts,
      cooperationHistory,
      evaluations,
      loadSupplierDetail,
      goBack,
      handleEdit,
      handleProducts,
      viewQualification,
      viewProduct,
      getQualificationStatusType
    }
  }
})
</script>

<style scoped>
.supplier-detail {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-left h2 {
  margin: 0;
  color: #2563eb;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-count {
  font-size: 14px;
  color: #666;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.info-item label {
  font-weight: bold;
  color: #666;
  min-width: 120px;
  margin-right: 10px;
}

.history-content h4 {
  margin: 0 0 5px 0;
  color: #2563eb;
}

.history-content p {
  margin: 0 0 10px 0;
  color: #666;
}

.history-details {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .header-right {
    width: 100%;
    display: flex;
    gap: 10px;
  }
}
</style> 